import React from 'react';
import { useDispatch } from 'react-redux';
import { useSelector } from 'react-redux';

export default function Main() {
  // 3.1 使用useSelector获取list
  const list = useSelector((state) => state.list);
  const dispatch = useDispatch();

  return (
    <section className="main">
      <input id="toggle-all" className="toggle-all" type="checkbox" />
      <label htmlFor="toggle-all">全选</label>
      <ul className="todo-list">
        {/* 3.2 遍历生成多个li、填入对应内容 */}
        {list.map((item) => (
          // 💥 注意设置key
          // 3.3 设置选中状态和样式
          <li key={item.id} className={item.isDone ? 'completed' : ''}>
            <div className="view">
              <input
                className="toggle"
                type="checkbox"
                checked={item.checked}
                // 4.1 绑定onChange，dispatch发出一个action
                onChange={() => dispatch({ type: 'toggle', payload: item.id })}
              />
              <label>{item.name}</label>
              {/* 5.1 onClick绑定dispatch，dispatch发出一个del的action */}
              <button
                className="destroy"
                onClick={() => dispatch({ type: 'del', payload: item.id })}
              ></button>
            </div>
          </li>
        ))}
      </ul>
    </section>
  );
}
